<template>
  <a-modal
    ref="modal"
    width="40%"
    style="min-width:400px"
    :bodyStyle="{ height: '400px', overflow: 'auto' }"
    v-model="isModel"
    title="被申请人联系人"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    :keyboard="false"
    :zIndex="9999"
  >
    <a-form-model ref="targetReviceForm" :rules="rules" style="width: 100%" labelAlign="left" :model="targetInfoForm">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="法定代理人" prop="manager">
        <a-input v-model="targetInfoForm.manager" allow-clear placeholder="请输入法定代理人" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="委托代理人" prop="agenter" has-feedback>
        <a-input v-model="targetInfoForm.agenter" allow-clear placeholder="请输入委托代理人" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系地址" prop="address" has-feedback>
        <a-input v-model="targetInfoForm.address" allow-clear placeholder="请输入联系地址" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系电话" prop="phone" has-feedback>
        <a-input v-model="targetInfoForm.phone" allow-clear placeholder="请输入联系电话" />
      </a-form-model-item>
    </a-form-model>

    <div class="title_centerBtn">
      <a-button type="primary" style="margin-right: 20px" :loading="loading" @click="saveTargetInfo">
        保存
      </a-button>
    </div>

  </a-modal>
</template>

<script>
  export default {
    data () {
      return {
        isModel: false,
        labelCol: { span: 4 }, // label宽
        wrapperCol: { span: 12 }, // 组件宽
        loading: false, // 按钮显示
        adid: null,
        targetInfoForm: {
          manager: null, // 法定代表人
          agenter: null, // 委托代理人
          address: null, // 联系地址
          phone: null // 联系电话
        },
        /**
         * 添加表单验证规则
         */
        rules: {
          manager: [
            { required: true, message: '请输入法定代理人', trigger: 'blur' },
            { max: 50, message: '长度不能超过50', trigger: 'blur' }
          ],
          address: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
          phone: [{ required: true, validator: this.checkTel }]
        }
      }
    },
    methods: {
      init (adid) {
        this.adid = adid
        this.isModel = true
        this.$nextTick(() => {
            this.$refs.targetReviceForm.resetFields()
        })
      },
      checkTel (rule, value, callback) {
        if (value == '' || value == undefined || value == null) {
          callback(new Error('请输入电话号码'))
        }
        if (value && !/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/.test(value)) {
          callback(new Error('请输入正确的电话号码'))
        }
        callback()
      },
      cancelTargetInfo () {
        this.targetInfoForm = {
          manager: null, // 法定代表人
          agenter: null, // 委托代理人
          address: null, // 联系地址
          phone: null // 联系电话
        }
        this.isModel = false
      },
      saveTargetInfo () {
        this.$refs.targetReviceForm.validate(valid => {
          if (valid) {
            this.$emit('setTargetInfo', this.targetInfoForm, this.adid)
          }
        })
      }

    }
  }
  </script>

 <style lang="less" scoped>
    .title_backBtn {
      width: 100%;
      display: inline-block;
    }
    .title_centerBtn {
      display: flex;
      align-content: center;
      justify-content: center;
      align-content: center;

    }
</style>
